---
title: Agregar iconos a los enlaces externos
description: Aprende cómo instalar un plugin de rehype para agregar iconos a los enlaces externos en tus archivos Markdown.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Usando un plugin de rehype, puedes identificar y modificar los enlaces en tus archivos Markdown que apuntan a sitios externos. Este ejemplo agrega iconos al final de cada enlace externo, para que los visitantes sepan que están saliendo de tu sitio.

## Prerrequesitos
- Un proyecto de Astro que utiliza Markdown para las páginas de contenido.

## Receta

1. Instala el plugin `rehype-external-links`.

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rehype-external-links
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rehype-external-links
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rehype-external-links
        ```
        </Fragment>
      </PackageManagerTabs>

2. Importa el plugin en tu archivo `astro.config.mjs`.

	Pasa `rehypeExternalLinks` al array `rehypePlugins`, junto con un objeto de opciones que incluya una propiedad `content`. Si deseas agregar texto sin formato al final del enlace, establece el `type` de esta propiedad como `text`. Para agregar HTML en lugar de texto al final del enlace, establece el `type` de la propiedad como `raw`.

    ```ts
    // ...
    import rehypeExternalLinks from 'rehype-external-links';

    export default defineConfig({
      // ...
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: 'text', value: ' 🔗' }
            }
          ],
        ]
      },
    });
    ```

:::note
  El valor de la propiedad `content` [no se representa en el árbol de accesibilidad](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). Por lo tanto, es mejor dejar claro que el enlace es externo en el contenido que lo rodea en lugar de depender únicamente del icono.
:::

## Recursos
- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)